<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style type="text/css">
        form div {
            height: 50px;
            line-height: 50px;
        }

        /* 根据数据内容自动展开高度 */
        form div:nth-child(4) {
            height: auto;
        }

        form div span:first-child {
            display: inline-block;
            width: 100px;
        }

    </style>
</head>
<body>

<div id="div1" >
    <form>
        <div>
            <span>姓名：</span>
            <span>
            <input type="text" v-model='username'>
            </span>
        </div>
        <div>
            <span>性别：</span>
            <span>
            <input type="radio" id="male" value="1" v-model='gender'><!--创建了一个Vue实例的gender属性，将其和gender绑定，实现和同一个name相同的效果-->
            <label for="male">男</label>
            <input type="radio" id="female" value="2" v-model='gender'>
            <label for="female">女</label>
            </span>
        </div>
        <div>
            <span>爱好：</span>
            <input type="checkbox" id="ball" value="1" v-model='hobby'>
            <label for="ball">篮球</label>
            <input type="checkbox" id="sing" value="2" v-model='hobby'>
            <label for="sing">唱歌</label>
            <input type="checkbox" id="code" value="3" v-model='hobby'>
            <label for="code">写代码</label>
        </div>
        <div>
            <span>工作：</span>
            <!--
                multiple：展开select下拉菜单，可以多选
             -->
            <select v-model='jobs' multiple >
                <option value="0">请选择职业...</option>
                <option value="1">java开发</option>
                <option value="2">前端开发</option>
                <option value="3">大数据开发</option>
            </select>
        </div>
        <div>
            <span>个人介绍：</span>
            <textarea v-model='desc'></textarea>
        </div>
        <div>
            <input type="submit" value="提交" @click.prevent='handle'>  <!--取消事件的提交，-->
        </div>

    </form>
</div>
<script>
    const vueObj = new Vue({
        el: '#div1',
        data: {
            username: "",
            gender: 2,
            hobby: ['1', '2'],
            // jobs: 2,
            jobs: [1, 2],
            desc: "个人介绍",

        },
        methods: {
            handle: function() {
                console.log("提交数据");
                console.log(this.username);
                console.log(this.gender);
                console.log(this.hobby.toString());  //数组，不加toString打印的就是对象
                console.log(this.jobs);
                console.log(this.desc);
            }
        }
    });
</script>
</body>
</html>